<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
// @ts-ignore
import {
  Refresh,
  Document,
  Van,
  Money,
  Promotion,
  Calendar
} from '@element-plus/icons-vue';
import TrendChart from '@/components/dashboard/TrendChart.vue';

// 定义订单数据类型
interface OrderData {
  goodsNo: string;
  waybillNo: string;
  sender: string;
  senderPhone: string;
  senderAddress: string;
  departureStation: string;
  transferStation: string;
  destinationStation: string;
  receiver: string;
  receiverPhone: string;
  receiverAddress: string;
  goodsType: string;
  quantity: number;
  volume: number;
  weight: number;
  paymentMethod: string;
  declaredValue: number;
  insurance: number;
  deliveryFee: number;
  unloadingFee: number;
  totalFreight: number;
  creator: string;
  creatorPhone: string;
  createTime: string;
  status: string;
  operation: string;
}

// 首页视图

// 顶部卡片数据
const statsData = reactive({
  todayOrders: {
    value: 12342,
    unit: '单',
    increase: '+12%',
    icon: Document,
    color: '#4066FF',
    title: '今日订单'
  },
  todayWaybills: {
    value: 103923,
    unit: '单',
    increase: '+12%',
    icon: Van,
    color: '#36C88A',
    title: '今日运单'
  },
  todayRevenue: {
    value: 233923,
    unit: '元',
    increase: '+12%',
    icon: Money,
    color: '#FFAB2B',
    title: '今日收款'
  },
  todayExpenses: {
    value: 4456,
    unit: '元',
    increase: '+12%',
    icon: Promotion,
    color: '#FF6A3C',
    title: '今日支出'
  },
  awaitingDelivery: {
    value: 3240,
    unit: '单',
    increase: '+12%',
    icon: Calendar,
    color: '#4F98FE',
    title: '待配送订单'
  }
});

// 趋势图时间范围
const trendTimeRange = ref('day');

// 获取实时订单数据
const orderListLoading = ref(false);
const orderData = ref<OrderData[]>([]);

// 表格列配置
const fixedLeftColumns = [
  { prop: 'goodsNo', label: '货号', width: 120, fixed: 'left' },
  { prop: 'waybillNo', label: '运单号', width: 150, fixed: 'left' }
];

const scrollableColumns = [
  { prop: 'sender', label: '发货人', width: 100 },
  { prop: 'senderPhone', label: '发货人电话', width: 130 },
  { prop: 'senderAddress', label: '发货人地址', width: 250 },
  { prop: 'departureStation', label: '发货站', width: 100 },
  { prop: 'transferStation', label: '中转站', width: 100 },
  { prop: 'destinationStation', label: '到达站', width: 100 },
  { prop: 'receiver', label: '收货人', width: 100 },
  { prop: 'receiverPhone', label: '收货人电话', width: 130 },
  { prop: 'receiverAddress', label: '收货人地址', width: 250 },
  { prop: 'goodsType', label: '货物类型', width: 100 },
  { prop: 'quantity', label: '总数量', width: 80 },
  { prop: 'volume', label: '总体积(方)', width: 100 },
  { prop: 'weight', label: '总重量(KG)', width: 100 },
  { prop: 'paymentMethod', label: '付款方式', width: 100 },
  { prop: 'declaredValue', label: '声明价值', width: 100 },
  { prop: 'insurance', label: '保费', width: 80 },
  { prop: 'deliveryFee', label: '配送费', width: 80 },
  { prop: 'unloadingFee', label: '卸货费', width: 80 },
  { prop: 'totalFreight', label: '总运费', width: 100 },
  { prop: 'creator', label: '开单人', width: 100 },
  { prop: 'creatorPhone', label: '开单人电话', width: 130 },
  { prop: 'createTime', label: '开单时间', width: 180 }
];

const fixedRightColumns = [
  { prop: 'status', label: '状态', width: 100, fixed: 'right' },
  { prop: 'operation', label: '操作', width: 100, fixed: 'right' }
];

// 模拟获取订单数据
const fetchOrderData = () => {
  orderListLoading.value = true;
  
  // 模拟异步请求
  setTimeout(() => {
    // 生成随机订单数据
    const mockData: OrderData[] = [];
    for (let i = 0; i < 50; i++) {
      mockData.push({
        goodsNo: `GN${String(Math.floor(Math.random() * 1000000)).padStart(6, '0')}`,
        waybillNo: `WB${String(Math.floor(Math.random() * 10000000)).padStart(7, '0')}`,
        sender: `发货人${i + 1}`,
        senderPhone: `1${String(Math.floor(Math.random() * 1000000000)).padStart(10, '0')}`,
        senderAddress: `广东省深圳市南山区科技园${i + 1}号楼`,
        departureStation: `深圳站`,
        transferStation: i % 3 === 0 ? `广州站` : '',
        destinationStation: `北京站`,
        receiver: `收货人${i + 1}`,
        receiverPhone: `1${String(Math.floor(Math.random() * 1000000000)).padStart(10, '0')}`,
        receiverAddress: `北京市海淀区中关村${i + 1}号`,
        goodsType: i % 4 === 0 ? '易碎品' : i % 4 === 1 ? '电子产品' : i % 4 === 2 ? '服装' : '食品',
        quantity: Math.floor(Math.random() * 20) + 1,
        volume: parseFloat((Math.random() * 10 + 0.1).toFixed(2)),
        weight: parseFloat((Math.random() * 100 + 0.5).toFixed(2)),
        paymentMethod: i % 3 === 0 ? '寄付' : i % 3 === 1 ? '到付' : '月结',
        declaredValue: parseFloat((Math.random() * 10000).toFixed(2)),
        insurance: parseFloat((Math.random() * 100).toFixed(2)),
        deliveryFee: parseFloat((Math.random() * 200 + 10).toFixed(2)),
        unloadingFee: parseFloat((Math.random() * 50).toFixed(2)),
        totalFreight: parseFloat((Math.random() * 500 + 50).toFixed(2)),
        creator: `操作员${i % 5 + 1}`,
        creatorPhone: `1${String(Math.floor(Math.random() * 1000000000)).padStart(10, '0')}`,
        createTime: new Date().toLocaleString(),
        status: i % 5 === 0 ? '已签收' : i % 5 === 1 ? '运输中' : i % 5 === 2 ? '已发货' : i % 5 === 3 ? '已装车' : '已揽收',
        operation: '详情'
      });
    }
    
    orderData.value = mockData;
    orderListLoading.value = false;
  }, 1000);
};

// 刷新数据
const refreshData = () => {
  fetchOrderData();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchOrderData();
});
</script>

<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <div class="stats-card-container">
      <el-row :gutter="16">
        <el-col v-for="(item, key) in statsData" :key="key" :span="24 / Object.keys(statsData).length">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-card-content">
              <div class="stats-card-icon" :style="{ backgroundColor: item.color + '15' }">
                <el-icon :size="30" :color="item.color">
                  <component :is="item.icon" />
                </el-icon>
              </div>
              <div class="stats-card-info">
                <div class="stats-card-title">{{ item.title }}</div>
                <div class="stats-card-value">
                  {{ item.value }}
                  <span class="stats-card-unit">{{ item.unit }}</span>
                  <span class="stats-card-increase">{{ item.increase }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 趋势图区域 -->
    <el-card class="trend-chart-card" shadow="hover">
      <template #header>
        <div class="trend-chart-header">
          <div class="trend-chart-title">订单趋势统计</div>
          <div class="trend-chart-actions">
            <el-radio-group v-model="trendTimeRange" size="small">
              <el-radio-button label="day">日</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>
      <div class="trend-chart-container">
        <TrendChart :time-range="trendTimeRange" />
      </div>
    </el-card>

    <!-- 实时订单列表 -->
    <el-card class="order-list-card" shadow="hover">
      <template #header>
        <div class="order-list-header">
          <div class="order-list-title">实时订单列表</div>
          <div class="order-list-actions">
            <el-button :icon="Refresh" circle size="small" @click="refreshData" />
          </div>
        </div>
      </template>
      <div class="order-list-container">
        <el-table
          v-loading="orderListLoading"
          :data="orderData"
          style="width: 100%"
          height="350"
          border
        >
          <!-- 固定左侧列 -->
          <el-table-column
            v-for="column in fixedLeftColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :fixed="column.fixed"
          />
          
          <!-- 可滚动的中间列 -->
          <el-table-column
            v-for="column in scrollableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          />
          
          <!-- 固定右侧列 -->
          <el-table-column
            v-for="column in fixedRightColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :fixed="column.fixed"
          >
            <template #default="{ row }" v-if="column.prop === 'operation'">
              <el-button type="primary" link size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 顶部统计卡片样式 */
.stats-card-container {
  margin-bottom: 16px;
}

.stats-card {
  height: 120px;
  display: flex;
  align-items: center;
}

.stats-card-content {
  display: flex;
  align-items: center;
}

.stats-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.stats-card-info {
  flex: 1;
}

.stats-card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stats-card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: baseline;
}

.stats-card-unit {
  font-size: 14px;
  margin-left: 4px;
  color: #909399;
}

.stats-card-increase {
  font-size: 12px;
  margin-left: 8px;
  color: #36C88A;
}

/* 趋势图区域样式 */
.trend-chart-card {
  margin-bottom: 16px;
}

.trend-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trend-chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.trend-chart-container {
  height: 350px;
}

/* 订单列表样式 */
.order-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-list-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.order-list-container {
  margin-top: 8px;
}
</style>
